<template>
    <div class="common-layout">
        <el-container>
            <el-header>Header</el-header>
            <el-main>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column type="index" label="序号" width="55" />
                    <el-table-column property="goods_Name" label="商品名称" />
                    <el-table-column property="goods_BarCode" label="商品编码" />
                    <el-table-column property="warehouse_AreaName" label="仓库区域名称" />
                    <el-table-column property="reservoir_AreaName" label="库区名称" />
                    <el-table-column property="binL_Code" label="库位" />
                    <el-table-column property="binL_Nums" label="库位数量" />
                    <el-table-column property="binL_UseNums" label="库位以用数量" />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <!--<el-button type="danger">删除</el-button>-->
                            <el-button type="success"
                                @click="handleOutStorageClick(true, scope.row.goods_Id, scope.row.binL_Id)">出库</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </div>

    <el-dialog v-model="logic.isOpen" title="出库信息" width="500">
        <el-form :model="form">
            <el-form-item label="出库数量" :label-width="formLabelWidth">
                <el-input v-model="form.goodsOutWL_OutNums"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="logic.isOpen = false">取消</el-button>
                <el-button type="primary" @click="outStorage">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axiosHelper from '@/components/AxiosRequest/axiosHelper';

import { ElTable, ElMessage } from 'element-plus'

//分页数据
const pageData = reactive(
    {
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        totalPage: 0
    }
)

const tableData = ref([])
function showTable() {
    axiosHelper.readAxios('api/Storage/QueryStorageAsync',
        {
            method: "get",
            params: {
                pageIndex: pageData.pageIndex,
                pageSize: pageData.pageSize,
                goods_Name: "",
                binL_Code: "",
                reservoir_AreaId: "",
                warehouse_AreaId: "",
            }
        }
    )
        .then(res => {
            console.log(res)
            tableData.value = res.data.data.data
        })
}

//钩子函数
onMounted(() => {
    showTable()
})

const formLabelWidth = '80px'

const logic = reactive(
    {
        isOpen: false,
        goods_Id: "",
        binL_Id: ""
    }
)

//出库点击事件
const handleOutStorageClick = (isOpne: boolean, goods_Id: string, binL_Id: string) => {
    //初始化数量
    form.goodsOutWL_OutNums = ""

    logic.isOpen = isOpne
    logic.goods_Id = goods_Id
    logic.binL_Id = binL_Id
}

//表单数据
const form = reactive(
    {
        goodsOutWL_Id: "",
        goodsOutWL_GoodsId: "",
        goodsOutWL_WarehouseLocationId: "",
        goodsOutWL_OutNums: ""
    }
)
//入库操作
function outStorage() {
    form.goodsOutWL_GoodsId = logic.goods_Id
    form.goodsOutWL_WarehouseLocationId = logic.binL_Id
    console.log(form)
    axiosHelper.writeAxios("api/Outbound/InsertOutboundOrder",
        {
            method: "post",
            data: form
        }
    )
        .then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.message);
                logic.isOpen = false
                showTable()
            }
            else {
                ElMessage.error(res.data.message);
                return;
            }
        })
}
</script>

<style>
.customer-header {
    background-color: transparent;
    /* 将头部背景设为透明 */
}
</style>